<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>07_CSS3D-元素背面是否可见</title>
  <!-- 
  在 CSS3D 中，元素的背面是否可见取决于几个因素，包括使用的 CSS 属性和浏览器的渲染方式。
  1. 基本概念
  - 3D 转换：通过使用 CSS 的  `transform`  属性，可以对元素进行三维旋转和变换。通过旋转，元素的背面可能会变得可见。

  2. 背面可见性控制
  -  `backface-visibility`  属性：这是控制元素背面是否可见的关键属性。它有两个值：
    -  `visible` ：元素的背面在旋转时可见。
    -  `hidden` ：元素的背面在旋转时不可见。

   示例：
  .face {
      position: absolute;
      width: 200px;
      height: 200px;
      background: rgba(255, 255, 255, 0.8);
      border: 1px solid #ccc;
      line-height: 200px;
      text-align: center;
      font-size: 20px;
      backface-visibility: hidden; /* 隐藏背面 */
  }
  3. 使用示例
  如果你希望在旋转一个立方体时，不显示其背面，可以在每个面上使用  `backface-visibility: hidden`  属性：
  .front  { transform: translateZ(100px); }
  .back   { transform: rotateY(180deg) translateZ(100px); backface-visibility: hidden; }
  .left   { transform: rotateY(-90deg) translateZ(100px); backface-visibility: hidden; }
  .right  { transform: rotateY(90deg) translateZ(100px); backface-visibility: hidden; }
  .top    { transform: rotateX(90deg) translateZ(100px); backface-visibility: hidden; }
  .bottom { transform: rotateX(-90deg) translateZ(100px); backface-visibility: hidden; }
  4. 注意事项
  - 浏览器支持： `backface-visibility`  属性在现代浏览器中得到了广泛支持，但在某些旧版本的浏览器中可能会存在兼容性问题。
  - 性能：使用 3D 转换和背面可见性属性时，要注意性能，尤其是在动画和复杂场景中。

  5. 总结
  在 CSS3D 中，通过使用  `backface-visibility`  属性，可以控制元素的背面是否可见。设置为  `hidden`  时，元素在旋转时背面将不可见，从而增强视觉效果和用户体验。掌握这些属性的使用，可以帮助开发者创建更加生动和互动的三维效果。
  -->
  <style>
    body{
      margin: 0;
      padding: 0;
      background-image: url(../images/grid.png);
    }

    .backface-visibility-box {
      position: relative;
      width: 200px;
      height: 200px;
      background-color: lightblue;
      /* 在父元素添加透视效果 */
      perspective: 800px;
    }

    .backface-visibility {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: pink;
      /* 形变 */
      transform: rotateY(180deg);
      /* 元素背向不可见 */
      backface-visibility: hidden;

      /* 帧动画 */
      animation: loop 6s linear infinite;
    }

    @keyframes loop{
      0%{
        transform: rotateY(0deg);
      }

      100%{
        transform: rotateY(-360deg);
      }
    }
  </style>
</head>
<body>

  <div class="backface-visibility-box">
    <div class="backface-visibility"></div>
  </div>
  
</body>
</html>